<template>
  <el-card class="box-card" shadow="hover" :body-style="{ padding: '0px 5px' }">
    <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="leftName" name="first">
        <RankList :data="rightValue" />
      </el-tab-pane>
      <el-tab-pane :label="leftName" name="second">
        <RankList :data="rightValue" />
      </el-tab-pane>
    </el-tabs> -->
    <div class="tabs-bar">
      <div
        class="tab"
        :class="{ act: act.name == it.name }"
        v-for="it in tabs[props.gameType]"
        :key="it.name"
        @mouseover="act = it"
      >
        <span>{{ it.name }}</span>
      </div>
    </div>
    <RankList :data="tabsValue" />
  </el-card>
</template>

<script setup>
import RankList from "./RankList.vue";
import { ref, computed, defineProps } from "vue";
import { gotoDetail } from "@/utils/action.js";
import { useRoute, useRouter } from "vue-router";
const router = ref(useRouter());

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
  gameType: {
    type: Number,
    default: 0,
  },
});

const activeName = ref("first");

const tabs = ref([
  {
    name: "单机",
    tjkey: "aloneRecommendGameVos",
    hotkey: "aloneHotGameVos",
  },
  {
    name: "网游",
    tjkey: "networkRecommendGameVos",
    hotkey: "networkHotGameVos",
  },
  {
    name: "页游",
    tjkey: "pageRecommendGameVos",
    hotkey: "pageHotGameVos",
  },
  [
    {
      name: "单机周排行榜",
      key: "tailRankWeekAloneGames",
    },
    {
      name: "单机总排行榜",
      key: "tailRankTotalAloneGames",
    },
  ],
  [
    {
      name: "网游周排行榜",
      key: "tailRankWeekNetworkGames",
    },
    {
      name: "网游总排行榜",
      key: "tailRankTotalNetworkGames",
    },
  ],
  [
    {
      name: "页游周排行榜",
      key: "tailRankWeekPageGames",
    },
    {
      name: "页游总排行榜",
      key: "tailRankTotalPageGames",
    },
  ],
  [
    {
      name: "手游周排行榜",
      key: "tailRankWeekSyGames",
    },
    {
      name: "手游总排行榜",
      key: "tailRankTotalSyGames",
    },
  ],
]);

const act = ref(tabs.value[props.gameType][0]);
const tabsValue = computed(() => props.data[act.value.key]);
const leftValue = computed(() => props.data[act.value.tjkey]);
const rightValue = computed(() => props.data[act.value.hotkey]);
const leftName = computed(() => act.value.name + "周排行榜");
const rightName = computed(() => act.value.name + "总排行榜");

const handleClick = (tab, event) => {
  console.log(tab, event);
};
</script>

<style lang="less" scoped>
.el-tabs ::v-deep(.el-tabs__item) {
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #93999e;
  line-height: 1;
  padding: 0 6px;
}

.el-tabs ::v-deep(.is-active) {
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #1d2127;
  line-height: 1;
}

.el-tabs ::v-deep(.el-tabs__active-bar) {
  background-color: #47b752;
}

.el-tabs ::v-deep(.el-tabs__nav-scroll) {
  padding: 16px 20px 0 20px;
}
.tabs-bar {
  display: flex;
  justify-content: center;
  flex: 1;
  border-bottom: 2px solid #eee;
  padding-bottom: 20px;
  padding-top: 20px;
  .tab {
    display: flex;
    position: relative;
    justify-content: center;
    width: 162px;
    cursor: pointer;
    span {
      font-size: 20px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #93999e;
      line-height: 16px;
    }
  }

  .act {
    span {
      color: @theme-color;
    }
  }
  .act:after {
    position: absolute;
    content: " ";
    border-bottom: 2px solid @theme-color;
    width: 162px;
    bottom: -22px;
  }
}
</style>
